<template>
    <div>
        <div>
            <el-row style="margin-top:10px">
                <el-col :span="24">
                    <el-table
                            ref="multipleTable"
                            stripe
                            :data="tableList"
                            style="width: 100%"
                    >
                        <!-- <el-table-column type="selection"width="55"/> -->
                        <el-table-column
                                label="序号"
                                type="index"
                                width="50"
                                align="center"/>

                        <el-table-column
                                prop="startTime"
                                label="日期"
                        >
                            <template slot-scope="scope">
                                <span>{{scope.row.startTime|filtersdata}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="课程"
                        ></el-table-column>
                        <el-table-column
                                prop="coachName"
                                label="教练"
                        ></el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址"
                        ></el-table-column>
                        <el-table-column
                                prop="reason"
                                label="备注"
                        ></el-table-column>
                    </el-table>
                    <br>
                    <el-pagination
                            background
                            style="float:right"
                            @current-change="pageChange"
                            layout="prev, pager, next"
                            :total="searchForm.total">
                    </el-pagination>
                    <span style="float:right;padding-top:6px;">共{{searchForm.total}}名球员，每页{{searchForm.pageSize}}名球员</span>
                    <div style="clear:both"></div>
                    <br>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    // import ExamineList from './ExamineList'
    // import GroupList from './GroupList'
    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    const header = [
        {prop: 'startTime', label: '日期'},
        {prop: 'name', label: '课程'},
        {prop: 'coachName', label: '教练'},
        {prop: 'address', label: '上课地点'},
        {prop: 'reason ', label: '备注'},
    ]

    export default {
        // components: { ExamineList, GroupList },
        data() {
            return {
                header,
                groupDialog: false,
                examineDialog: false,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [],

                options: [
                    {label: '全部', value: 1}
                ],

                searchForm: {
                    name: '',
                    grouping: '',
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,

                },

                selectList: []
            }
        },

        computed: {
            dateHeader() {
                const date = this.activeDate
            },

            ...mapState('Login', [
                'userStatus'
            ]),

        },

        props: {
            buttonDis: {
                type: Boolean,
                default: true
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchPlayerList',
                'deletePlayer',
                'fetchSelectList',
                'fetchKechengList',
            ]),

            toDetail(scope) {
                const {row: {id}} = scope
                this.$router.push({name: 'playerDetail', query: {id}})
            },

            onClose() {
                this.groupDialog = false
                this.examineDialog = true
            },

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            onSearch() {
                this.searchForm.pageNum = 1
                this.fetchList()
            },

            fetchList() {
                this.searchForm.id = sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                for (let i in this.searchForm) {
                    if (i !== 'grouping' && i !== 'name') {
                        this.searchForm[i] = Number(this.searchForm[i])
                    }
                }

                this.fetchKechengList(this.searchForm).then(res => {
                    const {code, data: {list, total}} = res
                    if (code === 200) {
                        console.log(list)
                        this.tableList = list || []
                        this.searchForm.total = Number(total)
                    }
                })
            },

            selectChange(val) {
                this.selectList = val

                this.$emit('selectPlayer', val)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },

            getSelect() {
                this.fetchSelectList({type: 'PG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },

            onDelete() {
                let list = []
                this.selectList.forEach(item => {
                    list.push(item.id)
                })

                this.deletePlayer({ids: list}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.deleteDialog = false
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            }
        },

        created() {
            this.fetchList()
            // this.getSelect()
            // console.log("1234567");
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            filtersdata: function (e) {
                return formatDate(e, 'Y-M-D H:I:S')
            },
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].dictNo) {
                        return data[i].dictName
                    }
                }
            },
        },


    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }
</style>



